<template>
	<div class="bgc">
		<div class="home-head">
			<img src="../assets/img/home/home-address.png" >
			<span>东软软件园企业服务中心</span>
			<img @click="myshopping" src="../assets/img/home/home-shopping.png" >
			<img src="../assets/img/home/home-message.png" >
		</div>
		<div class="home-search">
			<div class="home-search-main">
				<div>
					<img src="../assets/img/home/home-search.png" style="height: 3vh; padding-left: 6vw;">
					<span style="color: #999999;padding-bottom: 3px;">|</span>
					<span style="color: #999999; padding-right: 10vw;">麦当劳咖啡 3元特价</span>
					<span>搜索</span>
				</div>
			</div>
		</div>
		<div class="home-search-bar">
			<span>黄焖鸡米饭</span>
			<span>灵芝妹子来线</span>
			<span>新疆炒米粉</span>
			<span>烤肉饭</span>
		</div>
		<div style="display: flex;justify-content: center;">
			<div class="activity">
				<img src="../assets/img/home/home-swiper1.png">
			</div>
		</div>
		<div class="home-bar">
			<div>
				<img src="../assets/img/home/meishi.webp">
				<span>美食外卖</span>
			</div>
			<div>
				<img src="../assets/img/home/zaocan.webp">
				<span>早餐</span>
			</div>
			<div>
				<img src="../assets/img/home/mstg.png">
				<span>美食团购</span>
			</div>
			<div>
				<img src="../assets/img/home/paotui.webp">
				<span>跑腿代购</span>
			</div>
			<div>
				<img src="../assets/img/home/hanbao.webp">
				<span>特色汉堡</span>
			</div>
			<div>
				<img src="../assets/img/home/mifen.webp">
				<span>米粉</span>
			</div>
			<div>
				<img src="../assets/img/home/xiaochi.webp">
				<span>特色小吃</span>
			</div>
			<div>
				<img src="../assets/img/home/zhachuan.webp">
				<span>炸鸡炸串</span>
			</div>
			<div>
				<img src="../assets/img/home/mc.png">
				<span>买菜</span>
			</div>
			<div>
				<img src="../assets/img/home/tpyp.png">
				<span>甜品饮品</span>
			</div>
		</div>
		<div class="home-tab-head">
			——  推荐商家  ——
		</div>
		<div class="home-tab" >
			<router-link v-for="item in hometab" :to=item.router>{{item.name}}</router-link>
<!--			<router-link  :to=gainhometab[0].router>{{gainhometab[0].name}}</router-link>-->
<!--			<router-link  :to=gainhometab[1].router>{{gainhometab[1].name}}</router-link>-->
<!--			<router-link  :to=gainhometab[2].router>{{gainhometab[2].name}}</router-link>-->
<!--			<router-link  :to=gainhometab[3].router>{{gainhometab[3].name}}</router-link>-->
		</div>
		<div>
			<router-view />
		</div>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				gainhometab:[{
					name:'',
					route:''
				}],
				hometab:[
					{
						name:"综合排序",
						router:'zonghepaixu'
					},
					{
						name:"距离最近",
						router:'julizuijin'
					},
					{
						name:"销量最高",
						router:'xiaoliangzuigao'
					},
					{
						name:"筛选",
						router:'xiaoliangzuigao'
					}
				]
			}
		},
		methods:{
			myshopping(){
				this.$router.push({path:'/shopping'})
			}
		},
		mounted:function () {

			// this.$axios({
			// 	method: "get",
			// 	url:'/gethometab'
			// }).then((result) => {
			// 	console.log(result.data)
			// 	this.gainhometab=result.data
			// })
		}

	}
</script>

<style scoped>
	@import '../assets/css/reset.css';

	.bgc {
		background: linear-gradient(to bottom, #FFFFFF 1%, #F5F5F5 99%);
	}

	.home-head {
		background-color: #20c3fe;
		height: 6vh;
		line-height: 6vh;
		padding:1vh 0 2vw 1vh;
		
		display: flex;
		align-items: center;
	}

	.home-head>span {
		color: hsl(0deg 0% 96%);
		font-size: 20px;
		flex:1;
		white-space: nowrap;
		/*强制span不换行*/
		display: inline-block;
		/*将span当做块级元素对待*/
		width: 20vw;
		overflow: hidden;
		/*超出宽度部分隐藏*/
		text-overflow: ellipsis;
		/*超出部分以点号代替*/
	}
	.home-head>img{
		width: 4vh;
		height: 4vh;
		padding: 0 10px;
	}

	.home-search {
		height: 7vh;
		background-color: #1ec1fc;
		margin-bottom: 1vh;
	}

	.home-search-main {
		height: 7vh;
		background-color: #FFF;
		border-radius: 15px 15px 0 0;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
	}

	.home-search-main>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
		border-radius: 20px;
		border: 1.5px solid #1ec1fc;
		height: 5vh;
		margin: 0 4vw;

	}

	.home-search-main>div>span:nth-child(4) {
		width: 20vw;
		justify-items: flex-start;
		align-self: flex-start;
		padding: 1vh 0;
		border-radius: 25px 20px 25px 25px;
		background-color: #1ec1fc;
		text-align: center;
		color: #FFF;
		font-size: 16px;
		line-height: 20px;
	}

	.home-search-bar {
		display: flex;
		flex-flow: row nowrap;
		margin-left: 3vw;
	}

	.home-search-bar>span {
		font-size: 10px;
		padding: 2px 5px;
		margin: 5px 5px;
		height: auto;
		border: 1px solid #F2F2F2;
		border-radius: 25px;
		text-align: center;
		background-color: #F2F2F2;
	}

	.activity {
		width: 88vw;
		height: 15vh;
	}

	.activity>img {
		width: 88vw;
	}

	.home-bar {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: center;
		padding: 1vh 2vw;
	}

	.home-bar>div {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		width: 18vw;
		height: 12vh;
		font-family: "楷体";
	}

	.home-bar>div>img {
		width: 15vw;
		height: 15vw;
	}

	.home-bar>div>span {
		font-size: 13px;
		/* 实现文字超出,省略号显示 */
		display: inline-block;
		/*将span当做块级元素对待*/
		width: 18vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
		.home-tab-head{
			text-align: center;
			margin-top: 3vh;
		}
	.home-tab{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 2vh 3vw 2vh;
		
	}
	.home-tab>a{
		text-decoration: none;
		color: #999999;
		width: 20vw;
	}
	/* a:visited{
		font-weight: 700;
	}
	a:hover{
		font-weight: 700;
	}
	a:active{
		font-weight: 700;
	}
	a::after{
		content: "—";
		text-align: center;
		font-weight: 900;
		padding-left: 20px;
		color: #0085FF;
	} */
</style>
